<template>
  <div class="dance-music-mv">
    <div class="mv_title">
      <h4>最新mv</h4>
    </div>
    <div class="mv_right">
      <b-menu
        class="item-menu"
        :menu="areas"
        item-width="40px"
        item-height="30px"
        :active-show-border="false"
        @click="handleArea"
      >
      </b-menu>
      <div class="mv-title-forword">
        <router-link to="/mvlist">
          查看更多<i class="vbestui-iconfont icon-qian icon"></i>
        </router-link>
      </div>
    </div>
    <!-- mv列表 -->
    <mv-list :mv-list="newMV"></mv-list>
    <h4>
      MV排行榜
    </h4>
    <div class="mv_right">
      <b-menu
        class="item-menu"
        :menu="areas"
        item-width="40px"
        item-height="30px"
        :active-show-border="false"
        @click="handleArea"
      >
      </b-menu>
      <div class="mv-title-forword">
        <router-link to="/mvlist">
          查看更多<i class="vbestui-iconfont icon-qian icon"></i>
        </router-link>
      </div>
    </div>
    <div class="">
      <mv-rank-list :songlist="topMv"></mv-rank-list>
    </div>
  </div>
</template>
<script>
import { _getNewMV, _getTopMv } from '../../network/mv'
import mvList from './childsComps/mv-list.vue'
import mvRankList from './childsComps/mv-rank-list.vue'

export default {
  components: { mvList, mvRankList },
  data () {
    return {
      areas: ['内地', '港台', '欧美', '日本', '韩国'],
      limit: 8,
      currentRankMv: '内地',
      newMV: [], //最新mv
      offset: 1,
      topMv: [] //mv排行榜数据
    }
  },
  created () {
    this.getMv()
    this.getTopMv()
    // 系统提示
    this.$notify.info({
      title: '系统提示',
      message: '点击更多可查看全部mv',
      duration: 0,
      position: 'top-right'
    })
  },
  methods: {
    handleArea (index) {
      //最新mv切换
      this.currentRankMv = this.areas[index]
      this.getMv()
    },
    async getMv () {
      //获取最新mv
      var res = await _getNewMV(this.limit, this.currentRankMv)
      console.log(res)
      this.newMV = res.data.data
    },
    async getTopMv () {
      //获取mv排行榜
      var res = await _getTopMv(10, this.currentRankMv, (this.offset - 1) * 10)
      console.log(res)
      this.topMv = res.data.data
    }
  },
  mounted () {}
}
</script>
<style lang="less">
.dance-music-mv {
  padding: 10px 30px 0 30px;
}
.mv-title-forword {
  width: 120px;
}
.mv_right {
  display: flex;
  justify-content: space-around;
}
</style>
